<template>
  <div>
    <div class="search-list mb-10">
      <div>
        <component
            v-bind:is="item.propertyType"
            :property.sync="item"
            v-for="(item, index) in getPower"
            :key="index"
            @updateVal="updateVal"
        ></component>
      </div>
      <downexcel type="diseaseStudent" :option="searchForm" :excelName="excelName"></downexcel>
    </div>
    <div class="hearder-search">
      <el-col :span="24" class="breadcrumb-container input-val-box">
        <el-button size="small" type="primary" @click="addStudent()">添加学生异常档案</el-button>
        <span class="allbook">总 {{ page.total }} 条数据</span>
      </el-col>
    </div>
    <!--本体列表，数据 -->
    <div class="table-body">
      <div class="table-body-box">
        <el-table
            ref="multipleTable"
            :data="arryList"
            :stripe="tableStyle.tableStripe"
            :border="tableStyle.tableBorder"
            tooltip-effect="dark"
            style="width: 100%"
            header-cell-class-name="table-text-c"
            cell-class-name="table-text-c">
          <el-table-column
              label="学生头像"
              width="90">
            <template slot-scope="scope">
<!--              <viewerModle type="1" :imgSrc="scope.row.pic"></viewerModle>-->
              <ImagePreview :src="scope.row.pic" width="40px" height="40px"></ImagePreview>
            </template>
          </el-table-column>
          <el-table-column
              label="学生姓名"
              prop="name">
          </el-table-column>
          <el-table-column
              label="所在班级">
            <template slot-scope="scope">
             {{scope.row.classes?scope.row.classes.class_name:''}}
            </template>
          </el-table-column>
          <el-table-column
              label="异常项">
            <template slot-scope="scope">
              <el-tag
                  v-for="item in scope.row.disease_ids"
                  :key="item.id"
                  size="small">
                {{ item.name }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              label="操作"
              width="90">
            <template slot-scope="scope">
              <el-button size="small" @click="addStudent(scope.row.id)">编辑
              </el-button>
<!--              <el-button type="danger" size="small" @click="handleDetel(scope.row)">删除-->
<!--              </el-button>-->
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--工具条 分页-->
    <el-col :span="24" class="toolbar">
      <el-pagination
          background
          layout="total, prev, pager, next"
          :total="page.total"
          :page-size="page.pagesize"
          @current-change="handleSizeChange">
      </el-pagination>
    </el-col>
    <studentCaseAdd :visible.sync="detailVisible" :deviceId="deviceId" @beforePageFn="InitFn"></studentCaseAdd>
  </div>
</template>

<script>
import {pagination, tableoption} from '@/utils/util.js'
import studentCaseAdd from './studentCaseAdd'

export default {
  components: {
    studentCaseAdd
  },
  data() {
    return {
      detailVisible: false,
      deviceId: 0,
      arryList: [], // 页面数据列表
      // 设置table样式
      tableStyle: tableoption,
      // 设置table页面分页所需
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      searchForm: {
        id: 0,
        class_id: '',
        section_id: ''
      },
      getPower: {
        'section_id': {
          name: 'section_id', // key名称
          default: '', // 默认值
          propertyType: "Select", // 组件名称
          placeholder: '年段', // 默认值
          valueText: '', // 值
          leve: 2,
          api: this.api.user_sectionindex, // 下拉框的请求接口
          keyName: 'section_name',// 调用的字段
          child: [
            {
              name: 'class_id',
              default: '',
              propertyType: "",
              placeholder: '班级',
              valueText: '',
              api: this.api.user_classesindex,
              keyName: 'class_name',
            }
          ]
        }
      },
      excelName: ''
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    async InitFn() {
      let data = await this.$fetch(this.api.Developmental.carefull.caseUser.index, {
        id: 0,
        p: this.page.pageindex
      })
      if (!data.code) {
        this.arryList = this.getJson(data.list.data)
        this.page.total = data.list.total
      }
    },
    getJson(item){
      return JSON.parse(JSON.stringify(item))
    },
    addStudent(row) {
      this.deviceId = row || '';
      this.detailVisible = !this.detailVisible;
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    updateVal(option) {
      console.log('变更数据收到的数据内容：', option)
      if (option.input) {
        this.searchForm[option['input'].name] = option['input'].valueText
      } else if (option.select) {
        for (let i in option.select) {
          if (option.select[i].name) {
            this.searchForm[option.select[i].name] = option.select[i].valueText
          } else {
            this.searchForm[option.select[i - 1].name] = option.select[i].valueText ? option.select[i].valueText : option.select[i - 1].valueText
          }
        }
      }
      if(option.nameOption.length){
        this.excelName = option.nameOption.join(',')
      }else{
        this.excelName = ''
      }
    },
    handleDetel(item) {
      console.log('item', item)
      // this.$confirm(`确认删除【${item.name}】学生类异常, 是否继续?`, '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //   this.detelRespon(item)
      // }).catch(() => {
      // })
      this.$confirm(`确认删除【${item.name}】学生类异常, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delObj(row.id)
      }).then(data => {
        _this.$message({
          showClose: true,
          message: '删除成功',
          type: 'success'
        })
        this.getPage(this.page)
      }).catch(function (err) {
      })
    },
    detelRespon(item, attr) {
      // deleteSmall 参数 carefulNumber
      let href_ = this.api.Developmental.carefull.disease.delete
      let data_ = {id: item.id}
      if(item.carefulNumber>1){
        href_ = this.api.Developmental.carefull.disease.deleteSmall
        data_ = {id: attr.id}
      }
      this.$post(href_, data_).then((response) => {
        if (response.code === 0) {
          this.InitFn()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    }
  },
  mounted() {
  }
}
</script>
